<template>
  <div class="filter-device-container">
    <van-tree-select
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <ul
          class="filter-list"
          v-if="active === 0"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in orderTypeData"
            :key="item.value"
            @click="chooseOrderType(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <ul
          class="filter-list"
          v-if="active === 1"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in orderStatusData"
            :key="item.value"
            @click="chooseOrderStatus(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
      </template>
    </van-tree-select>

    <div class="operate-box">
      <div
        class="operate-btn cancel-btn"
        @click="cancelSearch"
      >取 消</div>
      <div
        class="operate-btn"
        @click="submit"
      >确 定</div>
    </div>
  </div>
</template>

<script>
import { TreeSelect } from 'vant';
import { getModelList, getDeviceGroupList } from '@/api/deviceManage.js';

export default {
  name: 'SearchFilterEngineer',
  components: {
    [TreeSelect.name]: TreeSelect
  },
  data() {
    return {
      active: 0,
      items: [{ text: '工单类型' }, { text: '工单状态' }],
      orderTypeData: [], //工单类型数据
      orderType: '',
      orderStatusData: [], //工单状态数据
      orderStatus: ''
    };
  },
  created() {
    this.createOrderTypeData();
    this.createOrderStatusData();
  },
  methods: {
    // 创建工单类型数据
    createOrderTypeData() {
      let typeArr = ['维修工单', '保养工单'];
      typeArr.map((item, index) => {
        this.orderTypeData.push({
          text: item,
          value: index + 1,
          checked: false
        });
      });
    },
    // 选择类型
    chooseOrderType(index) {
      if (!this.orderTypeData[index].checked) {
        for (let i in this.orderTypeData) {
          if (parseInt(i) === parseInt(index)) {
            this.orderTypeData[i].checked = true;
          } else {
            this.orderTypeData[i].checked = false;
          }
        }
        this.orderType = this.orderTypeData[index].value;
      } else {
        this.orderTypeData[index].checked = !this.orderTypeData[index].checked;
        this.orderType = '';
      }
    },
    // 创建工单状态数据
    createOrderStatusData() {
      let statusArr = ['待接单', '已接单', '已完成', '已取消'];
      statusArr.map((item, index) => {
        this.orderStatusData.push({
          text: item,
          value: index + 2,
          checked: false
        });
      });
    },
    // 选择设备状态
    chooseOrderStatus(index) {
      if (!this.orderStatusData[index].checked) {
        for (let i in this.orderStatusData) {
          if (parseInt(i) === parseInt(index)) {
            this.orderStatusData[i].checked = true;
          } else {
            this.orderStatusData[i].checked = false;
          }
        }
        this.orderStatus = this.orderStatusData[index].value;
      } else {
        this.orderStatusData[index].checked = !this.orderStatusData[index].checked;
        this.orderStatus = '';
      }
    },

    // 确定
    submit() {
      this.$emit('submitSearch', { orderType: this.orderType, orderStatus: this.orderStatus });
    },
    // 取消
    cancelSearch() {
      this.$parent.showFilterOrder = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-device-container {
  position: absolute;
  top: 1.226667rem;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 1.226667rem);
  background-color: #fff;

  .van-tree-select {
    flex: 1;
  }

  ::v-deep .van-sidebar-item--select::before {
    background-color: var(--color-primary);
  }

  .filter-list {
    padding: 0.16rem 0.426667rem;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0.32rem 0;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .operate-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.213333rem 0.426667rem;
    background-color: #fff;

    .operate-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 1.066667rem;
      color: #fff;
      font-size: 0.426667rem;
      border-radius: 0.106667rem;
      background-color: var(--color-primary);

      &.cancel-btn {
        color: var(--color-deep-gray);
        background-color: #fff;
        border: 1px solid var(--border-color);
      }
    }
  }
}
</style>